<template>
  <div id="main">
    <br>
    <label>搜索关键字:</label>

    <input class="top-input"
           type = "text"
           placeholder = "请输入关键字"
           v-model = "keyword">
    <button type = "button"
            class="btn btn-sm btn-primary color"
            @click="onSearch"
            v-model="keyword">查找</button>

    <br>
    <hr>
    <br>
    <table class="table table-striped table-hover">
      <tr>
        <td width="100"> 序号 </td>
        <td width="100">  借阅人  </td>
        <td> 借阅书籍  </td>
        <td>  借阅时间  </td>
        <td>  借阅提示  </td>
      </tr>

      <tr v-for="(item,index) in list.slice((current-1)*size,current*size)">
        <td width="100"> {{index+1}} </td>
        <td width="100">{{item.name}}</td>
        <td> {{item.borrowingBook}} </td>

        <td>{{item.remainingBorrowingTime}} </td>
        <td>{{item.tips}} </td>

        <td>
        </td>
      </tr>
    </table>
    <Page :total="total" :allPage="allpage" v-on:change="changePage"></Page>

  </div>
</template>

<script>
    import axios from 'axios';
    import Page from '@/publicComponent/Page';

    export default {
        name: "PersonalBorrowingInformation",
        components:{
            Page
        },
        data: function () {
            return  {
                url:this.baseURL+'PersonalBI.ctl',

                list:[],
                obj:{},
                keyword:'',

                size:4,
                current:1,
                total:0,
                allpage:0,
            }
        },
        created(){
            this.getList();
            var arr = this;
            axios.get(this.url).then((res) => {
                this.list=res.data;
            })
        },
        methods:{

            getList(){
                axios.get(this.url).then((res) => {
                    this.list=res.data;
                    this.total=this.list.length
                    this.allpage=Math.ceil(this.total/this.size)
                })
            },
            onSearch(){
                var arr = this;

                axios.get(this.url+"?keyword="+this.keyword).then((response) => {
                    arr.list=response.data;
                })
            },
            changePage:function(index){
                this.current = index;
            }
        }

    }
</script>

<style scoped>
  .color{
    background-color:#E6E6E6; color: #555555}
  #main{padding:5px;}
  .modal-body{
    text-align: center;
    position: relative;
    line-height: 50px;
    padding-left:50px;
  }
  .modal-body input{
    height:28px;
  }
</style>
